<template>
  <navigation></navigation>
    <div class="min-h-screen bg-gray-100">
      <!-- 主要内容 -->
      <div ref="contentDiv" class="container mx-auto px-6 py-8" >
        <h1 class="text-3xl font-bold text-gray-800 mb-6">岗位列表</h1>
  
        <!-- 搜索栏 -->
        <div class="mb-6">
          <div class="flex">
            <input
              type="text"
              placeholder="搜索职位、公司或关键词"
              class="flex-grow border-none rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              v-model="searchQuery"
            />
            <button
              class="bg-blue-500 text-white px-6 py-2 rounded-r-lg hover:bg-blue-600 transition duration-300 ease-in-out !rounded-button whitespace-nowrap"
              @click="searchJobs"
            >
              搜索
            </button>
          </div>
        </div>
  
        <!-- 筛选和排序选项 -->
        <div class="flex justify-between items-center mb-6">
          <div class="flex space-x-4">
            <div class="relative">
              <button
                class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 !rounded-button whitespace-nowrap"
                @click="toggleDropdown('jobType')"
              >
                工作类型
                <el-icon class="ml-2"><ArrowDown /></el-icon>
              </button>
              <div
                v-if="dropdowns.jobType"
                class="absolute z-10 mt-2 w-48 bg-white rounded-lg shadow-lg"
              >
                <a
                  v-for="type in jobTypes"
                  :key="type"
                  href="#"
                  class="block px-4 py-2 text-gray-800 hover:bg-gray-100"
                  @click="selectJobType(type)"
                >
                  {{ type }}
                </a>
              </div>
            </div>
            <div class="relative">
              <button
                class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 !rounded-button whitespace-nowrap"
                @click="toggleDropdown('location')"
              >
                工作地点
                <el-icon class="ml-2"><ArrowDown /></el-icon>
              </button>
              <div
                v-if="dropdowns.location"
                class="absolute z-10 mt-2 w-48 bg-white rounded-lg shadow-lg"
              >
                <a
                  v-for="location in locations"
                  :key="location"
                  href="#"
                  class="block px-4 py-2 text-gray-800 hover:bg-gray-100"
                  @click="selectLocation(location)"
                >
                  {{ location }}
                </a>
              </div>
            </div>
            <div class="relative">
              <button
                class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 !rounded-button whitespace-nowrap"
                @click="toggleDropdown('salary')"
              >
                薪资范围
                <el-icon class="ml-2"><ArrowDown /></el-icon>
              </button>
              <div
                v-if="dropdowns.salary"
                class="absolute z-10 mt-2 w-48 bg-white rounded-lg shadow-lg"
              >
                <a
                  v-for="range in salaryRanges"
                  :key="range"
                  href="#"
                  class="block px-4 py-2 text-gray-800 hover:bg-gray-100"
                  @click="selectSalaryRange(range)"
                >
                  {{ range }}
                </a>
              </div>
            </div>
          </div>
          <div class="relative">
            <button
              class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 !rounded-button whitespace-nowrap"
              @click="toggleDropdown('sort')"
            >
              排序方式
              <el-icon class="ml-2"><ArrowDown /></el-icon>
            </button>
            <div
              v-if="dropdowns.sort"
              class="absolute right-0 z-10 mt-2 w-48 bg-white rounded-lg shadow-lg"
            >
              <a
                v-for="option in sortOptions"
                :key="option"
                href="#"
                class="block px-4 py-2 text-gray-800 hover:bg-gray-100"
                @click="selectSortOption(option)"
              >
                {{ option }}
              </a>
            </div>
          </div>
        </div>
  
        <!-- 岗位列表 -->
        <div class="bg-white rounded-lg shadow-md">
          <div
            v-for="(job, index) in jobs"
            :key="job.id"
            class="p-6 border-b border-gray-200 last:border-b-0"
          >
            <div class="flex justify-between items-start">
              <div>
                <h2 class="text-xl font-bold text-gray-800 mb-2">
                  {{ job.title }}
                </h2>
                <p class="text-gray-600 mb-2">{{ job.company }}</p>
                <p class="text-gray-600 mb-2">
                  {{ job.location }} | {{ job.type }} | {{ job.experience }}
                </p>
                <p class="text-gray-600 mb-2">{{ job.salary }}</p>
                <p class="text-gray-500 text-sm mb-4">
                  发布时间：{{ job.postDate }}
                </p>
                <p class="text-gray-700">{{ job.description }}</p>
              </div>
              <div class="flex flex-col items-end">
                <button
                  class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out mb-2 !rounded-button whitespace-nowrap"
                  @click="applyJob(job.id)"
                >
                  立即应聘
                </button>
                <button
                  class="text-gray-500 hover:text-yellow-500 transition duration-300 ease-in-out"
                  @click="toggleFavorite(job.id)"
                >
                </button>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 分页器 -->
        <div class="mt-6 flex justify-center">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="10"
            :total="100"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive ,onMounted} from 'vue';
  import { useRouter } from 'vue-router'; // 引入 useRouter
  import { ElIcon, ElPagination } from 'element-plus';
  import { ArrowDown, Star, StarFilled } from '@element-plus/icons-vue';
  import navigation from '../../views/navigation.vue'
  const contentDiv = ref<HTMLElement>();
  const searchQuery = ref('');
  const currentPage = ref(1);
  
  const dropdowns = reactive({
    jobType: false,
    location: false,
    salary: false,
    sort: false,
  });
  
  const jobTypes = ['全职', '兼职', '实习', '校招'];
  const locations = ['北京', '上海', '广州', '深圳', '杭州'];
  const salaryRanges = ['5k-10k', '10k-20k', '20k-35k', '35k以上'];
  const sortOptions = ['最新发布', '薪资最高', '最多收藏'];
  
  const jobs = ref([
    {
      id: 1,
      title: '高级前端开发工程师',
      company: '字节跳动',
      location: '北京',
      type: '全职',
      experience: '3-5年',
      salary: '25k-50k',
      postDate: '2023-05-15',
      description: '负责公司核心产品的前端开发，优化用户体验，提升产品性能。',
      isFavorite: false,
    },
    {
      id: 2,
      title: 'Python 后端工程师',
      company: '腾讯',
      location: '深圳',
      type: '全职',
      experience: '1-3年',
      salary: '20k-40k',
      postDate: '2023-05-14',
      description: '参与公司核心服务的后端开发，负责系统架构设计和优化。',
      isFavorite: true,
    },
    {
      id: 3,
      title: '产品经理',
      company: '阿里巴巴',
      location: '杭州',
      type: '全职',
      experience: '3-5年',
      salary: '30k-60k',
      postDate: '2023-05-13',
      description: '负责公司核心产品的规划和设计，推动产品从概念到落地。',
      isFavorite: false,
    },
    {
      id: 4,
      title: 'UI/UX 设计师',
      company: '小米',
      location: '北京',
      type: '全职',
      experience: '2-4年',
      salary: '15k-30k',
      postDate: '2023-05-12',
      description: '负责公司产品的用户界面和用户体验设计，提升产品的视觉和交互体验。',
      isFavorite: false,
    },
    {
      id: 5,
      title: '数据分析师',
      company: '网易',
      location: '广州',
      type: '全职',
      experience: '1-3年',
      salary: '18k-35k',
      postDate: '2023-05-11',
      description: '负责公司核心业务的数据分析，为产品决策提供数据支持。',
      isFavorite: true,
    },
  ]);
  
  const toggleDropdown = (dropdown: keyof typeof dropdowns) => {
    Object.keys(dropdowns).forEach((key) => {
      if (key !== dropdown) {
        dropdowns[key as keyof typeof dropdowns] = false;
      }
    });
    dropdowns[dropdown] = !dropdowns[dropdown];
  };
  
  const selectJobType = (type: string) => {
    console.log('Selected job type:', type);
    dropdowns.jobType = false;
  };
  
  const selectLocation = (location: string) => {
    console.log('Selected location:', location);
    dropdowns.location = false;
  };
  
  const selectSalaryRange = (range: string) => {
    console.log('Selected salary range:', range);
    dropdowns.salary = false;
  };
  
  const selectSortOption = (option: string) => {
    console.log('Selected sort option:', option);
    dropdowns.sort = false;
  };
  
  const searchJobs = () => {
    console.log('Searching for:', searchQuery.value);
  };
  
  const router = useRouter(); 
  const applyJob = (jobId: number) => {
     router.push({ name: 'emailBox'});
  };
  
  const toggleFavorite = (jobId: number) => {
    const job = jobs.value.find((j) => j.id === jobId);
    if (job) {
      job.isFavorite = !job.isFavorite;
    }
  };
  
  const handlePageChange = (page: number) => {
    console.log('Page changed to:', page);
  };

  const setContentWidth = () => {
  if (contentDiv.value) {
    const windowWidth = window.innerWidth;
    contentDiv.value.style.width = `${windowWidth * 0.75}px`;
    contentDiv.value.style.marginLeft = `${windowWidth * 0.1}px`;
  }
};

onMounted(() => {
  setContentWidth();
  window.addEventListener('resize', setContentWidth);
});
  </script>
  
  <style scoped>
  .el-pagination {
    justify-content: center;
  }
  </style>
  
  